/* 添加一个全局重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 26.67%; /* 512 / 1920 * 100 = 26.67% */
}

.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel img.active {
    opacity: 1;
}

.carousel .controls {
    position: absolute;
    bottom: 10px;
    left: 90%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
}

.carousel .controls button {
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    color:#304a65;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel .controls button:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.search-form-container {
    display: flex;
    justify-content: center; /* 水平居中 */
}

.search-form {
    display: flex;
    align-items: center; /* 垂直居中 */
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
}

.search-input {
    flex: 1 1 50%; /* 在小屏幕上占据100%，在大屏幕上尽可能扩展 */
    margin-right: 1em; /* 输入框之间的间距 */
    box-sizing: border-box; /* 包括padding和border在内 */
    margin-bottom: 0.5em; /* 在换行时的底部间距 */
}

.search-submit {
    flex: none; /* 提交按钮宽度自适应 */
    padding: 0.5em 1em; /* 可根据需要调整按钮大小 */
}

/* 当屏幕宽度大于等于600px时 */
@media (min-width: 600px) {
    .search-input {
        flex: 1 1 0; /* 在大屏幕上不设固定宽度 */
        margin-bottom: 0; /* 移除底部间距 */
    }
    .search-form {
        max-width: 60%; /* 在大屏幕上占据50%的宽度 */
    }
}